<script setup>

import {reactive, ref} from "vue";

import {CirclePlus, Search, Edit, Check, Message} from '@element-plus/icons-vue';
import {axios} from "../../../plugins/axios";


const clickSearch = () => {
  console.log(searchForm);
};
const resetSearchForm = () => {
  if (searchFormRef.value) {
    searchFormRef.value.resetFields();
  }
};
const searchForm = reactive({
  title: "",
  category: "",
})
const categoryOptions = reactive([
  {
    value: 1,
    label: "黄金糕"
  },
  {
    value: 2,
    label: "双皮奶"
  },
  {
    value: 3,
    label: "龙须面"
  },
  {
    value: 4,
    label: "烤鸭"
  }
])

const searchFormRef = ref();

axios.get('/base/test/').then(res => {
  console.log('请求成功',res);
}).catch(err => {
  console.log('请求失败',err);
  return err;
})

</script>

<template>
  <div style="padding:20px">


    <router-link :to="{name:'ActivityCreate'}">
      <el-button type="primary" size="small">
        <el-icon>
          <CirclePlus/>
        </el-icon>
        新建活动
      </el-button>
    </router-link>

    <el-row style="margin-top:20px">
      <el-form :inline="true" class="demo-form-inline" size="small" :model="searchForm" ref="searchFormRef">
        <el-form-item label="活动状态" prop="title">
          <el-input v-model="searchForm.title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="公众号" style="width: 200px" prop="category">
          <el-select v-model="searchForm.category">
            <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动名称" prop="title">
          <el-input v-model="searchForm.title" placeholder="活动名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="clickSearch">筛选</el-button>
          <el-button size="small" @click="resetSearchForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-row gutter="20">
      <div v-for="(o,index) in 12" :key="o" style="margin:0 0 14px 14px">
        <el-card :body-style="{padding: '0px'}">
          <img style="padding: 0"
               src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"/>
          <div style="padding: 10px">
            <span style="font-size: 16px">好吃的汉堡{{ index }}</span>
            <div class="button-row" style="margin-top: 10px">
              <el-button size="small" :icon="Search" circle/>
              <el-button size="small" :icon="Edit" circle/>
              <el-button size="small" :icon="Check" circle/>
              <el-button size="small" :icon="Message" circle/>
            </div>
          </div>
        </el-card>
      </div>
    </el-row>

  </div>
</template>

<style scoped>
.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
</style>